import React, { useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { 
  Form, 
  Input, 
  Button, 
  Card,
  Typography, 
  message, 
  Tabs,
  Space
} from 'antd';
import { LockOutlined, MailOutlined, RiseOutlined } from '@ant-design/icons';
import { useAuth } from '../../contexts/AuthProvider';
import './index.less';

const { Title, Text } = Typography;
const { TabPane } = Tabs;

interface LoginFormValues {
  email: string;
  password: string;
}


const Login: React.FC = () => {
  const [loginForm] = Form.useForm<LoginFormValues>();
  const [loading, setLoading] = useState<boolean>(false);
  const [activeTab, setActiveTab] = useState<string>('login');
  const { signIn } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();

  // 获取登录前的路径，默认为首页
  const from = location.state?.from?.pathname || '/';

  const handleLogin = async (values: LoginFormValues) => {
    try {
      setLoading(true);
      const response = await signIn(values.email, values.password);
      if (response.success) {
        message.success('登录成功！');
        navigate(from, { replace: true });
      } else {
        message.error(response.message || '登录失败，请重试');
      }
    } catch (error: any) {
      message.error(error.message || '登录失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  // 超级管理员快速登录
  const fillSuperAdminAccount = () => {
    loginForm.setFieldsValue({
      email: 'admin@demo.com',
      password: 'demo123'
    });
    setActiveTab('login');
  };

  return (
    <div className="modern-login-container">
      {/* 左侧品牌区域 */}
      <div className="brand-section">
        <div className="brand-content">
          <div className="brand-icon">
            <RiseOutlined />
          </div>
          <Title level={1} className="brand-title">
            投资工具
          </Title>
          <Text className="brand-subtitle">
            智能投资规划 · 数据驱动决策
          </Text>
          <div className="feature-list">
            <div className="feature-item">📊 多策略投资计划</div>
            <div className="feature-item">📈 实时收益分析</div>
            <div className="feature-item">🔒 安全数据管理</div>
          </div>
        </div>
      </div>

      {/* 右侧登录表单 */}
      <div className="form-section">
        <Card className="login-card" variant="outlined">
          <div className="form-header">
            <Title level={2} className="form-title">
              投资工具系统
            </Title>
            <Text className="form-subtitle">
              请登录或注册您的账户
            </Text>
          </div>

          <Tabs 
            activeKey={activeTab} 
            onChange={setActiveTab}
            centered
            size="large"
          >
            <TabPane tab="登录" key="login">
              <Form
                form={loginForm}
                name="login"
                onFinish={handleLogin}
                autoComplete="off"
                size="large"
                className="login-form"
              >
                <Form.Item
                  name="email"
                  rules={[
                    { required: true, message: '请输入邮箱' },
                    { type: 'email', message: '请输入有效的邮箱地址' }
                  ]}
                >
                  <Input
                    prefix={<MailOutlined />}
                    placeholder="邮箱地址"
                    autoComplete="email"
                  />
                </Form.Item>

                <Form.Item
                  name="password"
                  rules={[
                    { required: true, message: '请输入密码' },
                    { min: 6, message: '密码至少6个字符' }
                  ]}
                >
                  <Input.Password
                    prefix={<LockOutlined />}
                    placeholder="密码"
                    autoComplete="current-password"
                  />
                </Form.Item>

                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    loading={loading}
                    block
                    className="login-btn"
                  >
                    {loading ? '登录中...' : '登录'}
                  </Button>
                </Form.Item>
              </Form>

              {/* 开发提示和快速登录 */}
              <div className="demo-section">
                <Space direction="vertical" size="small" style={{ width: '100%' }}>
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    管理员: admin@demo.com / demo123<br/>
                    演示用户: demo@demo.com / demo123<br/>
                  </Text>
                  <Button 
                    type="link" 
                    size="small"
                    onClick={fillSuperAdminAccount}
                    style={{ padding: 0, height: 'auto' }}
                  >
                    快速填入超级管理员账户
                  </Button>
                </Space>
              </div>
            </TabPane>

            {/* <TabPane tab="注册" key="signup">
              <Form
                form={signUpForm}
                name="signup"
                onFinish={handleSignUp}
                autoComplete="off"
                size="large"
                className="signup-form"
              >
                <Form.Item
                  name="email"
                  rules={[
                    { required: true, message: '请输入邮箱' },
                    { type: 'email', message: '请输入有效的邮箱地址' }
                  ]}
                >
                  <Input
                    prefix={<MailOutlined />}
                    placeholder="邮箱地址"
                    autoComplete="email"
                  />
                </Form.Item>

                <Form.Item
                  name="username"
                  rules={[
                    { required: true, message: '请输入用户名' },
                    { min: 3, message: '用户名至少3个字符' },
                    { max: 20, message: '用户名最多20个字符' }
                  ]}
                >
                  <Input
                    prefix={<UserOutlined />}
                    placeholder="用户名"
                    autoComplete="username"
                  />
                </Form.Item>

                <Form.Item
                  name="name"
                  rules={[
                    { required: true, message: '请输入姓名' },
                    { min: 2, message: '姓名至少2个字符' }
                  ]}
                >
                  <Input
                    prefix={<UserOutlined />}
                    placeholder="真实姓名"
                    autoComplete="name"
                  />
                </Form.Item>

                <Form.Item
                  name="password"
                  rules={[
                    { required: true, message: '请输入密码' },
                    { min: 6, message: '密码至少6个字符' }
                  ]}
                >
                  <Input.Password
                    prefix={<LockOutlined />}
                    placeholder="密码"
                    autoComplete="new-password"
                  />
                </Form.Item>

                <Form.Item
                  name="confirmPassword"
                  dependencies={['password']}
                  rules={[
                    { required: true, message: '请确认密码' },
                    ({ getFieldValue }) => ({
                      validator(_, value) {
                        if (!value || getFieldValue('password') === value) {
                          return Promise.resolve();
                        }
                        return Promise.reject(new Error('两次输入的密码不一致'));
                      },
                    }),
                  ]}
                >
                  <Input.Password
                    prefix={<LockOutlined />}
                    placeholder="确认密码"
                    autoComplete="new-password"
                  />
                </Form.Item>

                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    loading={loading}
                    block
                    className="signup-btn"
                  >
                    {loading ? '注册中...' : '注册'}
                  </Button>
                </Form.Item>
              </Form>
            </TabPane> */}
          </Tabs>

          <div className="form-footer">
            <Text type="secondary">
              © 2025 投资工具系统
            </Text>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default Login;